<template>
  <view class="detail-container">
    <!-- 套餐基本信息 -->
    <view class="package-header">
      <image :src="packageDetail.img" mode="aspectFill" class="package-image" @error="handleImageError"></image>
      <view class="package-info">
        <text class="package-name">{{ packageDetail.name }}</text>
        <view class="package-price">
          <text class="price">{{ formatPackagePrice(packageDetail.price) }}</text>
        </view>
        <view class="package-tags">
          <text class="tag">{{ packageDetail.sex === '0' ? '男女通用' : (packageDetail.sex === '1' ? '男' : '女') }}</text>
          <text class="tag">{{ packageDetail.age }}</text>
          <text class="tag">{{ packageDetail.code }}</text>
        </view>
      </view>
    </view>

    <!-- 套餐说明 -->
    <view class="detail-section">
      <view class="section-title">套餐说明</view>
      <view class="section-content">
        <text class="description">{{ packageDetail.remark || '暂无说明' }}</text>
      </view>
    </view>

    <!-- 注意事项 -->
    <view class="detail-section" v-if="packageDetail.attention">
      <view class="section-title">注意事项</view>
      <view class="section-content">
        <text class="attention">{{ packageDetail.attention }}</text>
      </view>
    </view>

    <!-- 检查组和检查项 -->
    <view class="detail-section" v-if="packageDetail.checkGroups && packageDetail.checkGroups.length > 0">
      <view class="section-title">检查项目</view>
      <view class="section-content">
        <view class="check-group" v-for="group in packageDetail.checkGroups" :key="group.id">
          <view class="group-header">
            <text class="group-name">{{ group.name }}</text>
            <!-- <text class="group-remark" v-if="group.remark">{{ group.remark }}</text> -->
          </view>
          <view class="check-items">
            <view class="check-item" v-for="item in group.checkItems" :key="item.id">
              <text class="item-name">{{ item.name }}</text>
              <!-- <text class="item-remark" v-if="item.remark">{{ item.remark }}</text> -->
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 预约按钮 -->
    <view class="bottom-bar">
      <button class="reserve-btn" @click="handleReserve">立即预约</button>
    </view>
  </view>
</template>

<script>
import { getPackageDetail, formatPackagePrice } from '@/utils/setmealService'

export default {
  data() {
    return {
      id: null,
      packageDetail: {
        id: 0,
        name: '',
        code: '',
        helpCode: '',
        sex: '0',
        age: '',
        price: 0,
        remark: '',
        attention: '',
        img: '/static/images/checkup-default.jpg',
        checkGroups: []
      }
    }
  },

  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.loadPackageDetail()
    }
  },

  methods: {
    formatPackagePrice,
    
    async loadPackageDetail() {
      try {
        uni.showLoading({
          title: '加载中...'
        })
        
        const detail = await getPackageDetail(this.id)
        if (detail) {
          this.packageDetail = {
            ...detail,
            img: detail.img || '/static/images/checkup-default.jpg'
          }
        }
      } catch (error) {
        console.error('加载套餐详情失败:', error)
        uni.showToast({
          title: '加载套餐详情失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    handleImageError() {
      this.packageDetail.img = '/static/images/checkup-default.jpg'
    },

    handleReserve() {
      // 检查用户是否登录
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.showModal({
          title: '提示',
          content: '请先登录后再预约',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }

      // 跳转到预约页面
      uni.navigateTo({
        url: `/pages/checkup/reserve?id=${this.packageDetail.id}&name=${encodeURIComponent(this.packageDetail.name)}&price=${this.packageDetail.price}`
      })
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;

  .package-header {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .package-image {
      width: 100%;
      height: 400rpx;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
    }

    .package-info {
      .package-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
      }

      .package-price {
        margin-bottom: 16rpx;

        .price {
          font-size: 40rpx;
          color: #ff4d4f;
          font-weight: bold;
        }
      }

      .package-tags {
        display: flex;
        flex-wrap: wrap;

        .tag {
          font-size: 24rpx;
          color: #007AFF;
          background: rgba(0,122,255,0.1);
          padding: 4rpx 16rpx;
          border-radius: 4rpx;
          margin-right: 16rpx;
          margin-bottom: 8rpx;
        }
      }
    }
  }

  .detail-section {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 24rpx;
        background: #007AFF;
        border-radius: 3rpx;
      }
    }

    .section-content {
      .description, .attention {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }

      .check-group {
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }

        .group-header {
          padding: 16rpx 0;
          border-bottom: 1px solid #f0f0f0;
          margin-bottom: 16rpx;

          .group-name {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
          }

          .group-remark {
            font-size: 24rpx;
            color: #999;
            margin-left: 16rpx;
          }
        }

        .check-items {
          .check-item {
            padding: 12rpx 0;
            display: flex;
            align-items: center;

            .item-name {
              font-size: 26rpx;
              color: #666;
            }

            .item-remark {
              font-size: 24rpx;
              color: #999;
              margin-left: 16rpx;
            }
          }
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);

    .reserve-btn {
      background: #007AFF;
      color: #fff;
      border-radius: 45rpx;
      font-size: 32rpx;
      height: 90rpx;
      line-height: 90rpx;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style> 